<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Embedding</h2>
		<p>In this guide we will learn how to embedd a application created inside nunuStudio in a webpage. nunuStudio applications are meant to be used inside web pages, nunuStudio editor can export web pages with the application already embedded in it and with fullscreen and vr buttons by default.</p>
		<p>There are two options for embedding applications in your webpage, the first one can be used to fast embed application with a single line of code, the second one can be used for a more flexible approach, with page communication support or more advanced controls.</p>

		<h3>The fast way</h3>
		<p>This is the fastest way to get a nunuStudio app running on your webpage, simple include the the nunu.min.js file in your webpage, and create a canvas with an id. Add the <code>NunuApp.loadApp('pong.nsp', 'canvas')</code> line to your body element onload and you are done, "pong.nsp" is the name of our project file and "canvas" is the id of our canvas element.</p>

		<pre><code class="hljs xml">&lt;html&gt;
&lt;head&gt;
	&lt;script src="nunu.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="Nunu.App.loadApp('pong.nsp', 'canvas')"&gt;
	&lt;canvas width="800" height="480" id="canvas"&gt;&lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

		<p>If everything worked as expected you should be able to see a window with the pong application running. You can also import external aplication, they dont need to be stored locally. As an example if you change to <code>NunuApp.loadApp('http://nunustudio.org/examples/files/nunu.nsp', 'canvas')</code> the homepage demo will be loaded instead.</p>

		<h3>Using javascript</h3>
		<p></p>
		<p>First we need to import the nunu.min.js file to the webpage, this javascript file includes all the code required to run a nunuStudio aplication. After including the runtime file a canvas to display the application is needed, add a canvas to your html code.</p>
		<pre><code class="hljs xml">&lt;!--Import nunuStudio runtime--&gt;
&lt;script type="text/javascript" src="nunu.min.js"&gt;&lt;/script&gt;

&lt;!--Canvas used to draw content--&gt;
&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>

		<h3>App object</h3>
		<p>Now lets create a new javascript script with the code bellow, this code creates a new App instance that will use the provided canvas to render the application.</p>
		<p>If you dont want to start running the application immediately you can use the loadProgramAsync() or loadProgram() (not recommended, this blocks the page until all files are loaded), these will load the application files and decode them but will not start running the application immediately, this can be used for preloading applications into an webpage, after the app gets loaded the run() method can be used to start it and the exit() method can be used to kill the application and dispose all resources used.</p>
		<pre><code class="hljs javascript">var app, canvas;

//Should be called after page load
function initialize()
{{'{'}}
//Get the canvas that will be used to draw content
canvas = document.getElementById("canvas");

//Create new app intance
app = new Nunu.App(canvas);

//Load and run the "app.nsp" file
app.loadRunProgram("app.nsp");
{{'}'}}

//Should be called every time the window is resized
function resize()
{{'{'}}
//Update canvas width and height attributes
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

//Resize app
app.resize();
{{'}'}}</code></pre>

		<p>To finish we need to call the initialize method after the page loads, and the resize method every time the canvas is resized. To do this we can add the code bellow to the document body declaration.</p>
		<pre><code class="hljs xml">&lt;body onload="initialize();" onresize="resize();"&gt;
...
&lt;/body&gt;</code></pre>

		<!--Toggle fullscreen and VR-->
		<h3>Toggle Fullscreen and VR</h3>
		<p>To toggle fullscreen its possible to use the toggleFullscreen method present in the app object, for VR its recomended to check if the browser supports WebVR and if there is a VRDisplay available before creating a button to toggle vr mode. To check for VR support use the following code.</p>
		<pre><code class="hljs javascript">//Toggle fullscreen mode
function toggleFullscreen()
{{'{'}}
app.toggleFullscreen(document.body);
{{'}'}}

//Toggle VR mode
function toggleVR()
{{'{'}}
app.toggleVR();
{{'}'}}

//Check if VR is available
if(app.vrAvailable())
{{'{'}}
//Check if there are displays available add button
Nunu.getVRDisplays(function(display)
{{'{'}}
	button = document.getElementById("vr");
	button.style.visibility = "visible";
{{'}'}});
{{'}'}}</code></pre>

		<!--Loading Bar-->
		<h3>Adding a loading bar</h3>
		<p>Booth the loadRunProgram() and the loadProgramAsync() methods provide a onProgress callback field, this callback returns a value from 0.0 to 1.0 that indicates loading progress, this value can be used to control a loading bar.</p>
		<p>A simple way to create a loading bar is by adding a couple of divisions, the code bellow is used for the default loading bar created when exporting web projects directly from the nunuStudio editor.</p>
		<pre><code class="hljs xml">&lt;!--Loading bar frame--&gt;
&lt;div style="position:absolute; width:100%; height:7%; left:0%; top:120%; border-style:solid; border-color:#FFFFFF; border-width:2px"&gt;
&lt;!--Loading bar--&gt;
&lt;div id="bar" style="position:absolute; width:0%; height:100%; left:0%; top:0%; background-color:#FFFFFF"&gt;
&lt;/div&gt;</code></pre>

		<p>To control the created bar the following code can be used.</p>
		<pre><code class="hljs javascript">//onProgress callback
var bar = document.getElementById("bar");
var onProgress = function(event)
{{'{'}}
if(event.lengthComputable)
{{'{'}}
	var progress = event.loaded / event.total * 100;
	bar.style.width = progress + "%";
{{'}'}}
{{'}'}};

//onLoad callback
var onLoad = function(){{'{'}}{{'}'}};

//Load and run app
app.loadRunProgram("app.nsp", onLoad, onProgress);</code></pre>
	</div>
</div>
